<template>
  <div>
    <!-- -----------------------------------------------------基本信息-------------------------------------------------------------- -->
    <el-divider>基本信息</el-divider>
    <div class="dialog_left children">
      <el-descriptions direction="vertical" :column="8" border>
        <el-descriptions-item label="入库单号">{{ form.warehousingNum || '-' }}</el-descriptions-item>
        <el-descriptions-item label="入库类型">{{ ['采购入库', '盘盈入库', '还回入库', '其他入库'][form.type] }}</el-descriptions-item>
        <el-descriptions-item label="入库仓库">{{ form.storehouseName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="入库状态">
          <dict-tag :options="InventoryStatus" :value="form.status" />
        </el-descriptions-item>
        <el-descriptions-item label="创建人">{{ form.createBy || '-' }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ form.createTime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="确认时间">{{ form.confirmTime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="确认人">{{ form.confirmBy || '-' }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <!-----------------------------------------------------物料采购表格----------------------------------------------------------- -->
    <el-divider>入库明细</el-divider>
    <div class="dialog_table">
      <el-table :data="currentPageData" style="width: 100%">
        <el-table-column label="序号" width="100">
          <template slot-scope="scope">
            <div> {{ scope.$index + 1 }} </div>
          </template>
        </el-table-column>
        <el-table-column prop="consPriceAndAmountVo.materialNum" label="物料编号" />
        <el-table-column prop="consPriceAndAmountVo.materialName" label="物料名称" />
        <el-table-column prop="consPriceAndAmountVo.typeName" label="类别" />
        <el-table-column prop="consPriceAndAmountVo.model" label="规格型号">
          <template slot-scope="{row}">
            <div> {{ row.consPriceAndAmountVo && row.consPriceAndAmountVo.model || '-' }} </div>
          </template>
        </el-table-column>
        <el-table-column prop="consPriceAndAmountVo.unitName" label="单位" />
        <el-table-column prop="batch" label="批次" />
        <el-table-column prop="price" label="单价（元）" />
        <el-table-column prop="amount" label="入库数量" />
        <el-table-column label="总价（元）">
          <template slot-scope="scope">
            <div> {{ totalPrice(scope.row.price, scope.row.amount) }} </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- --------------------------------分页器---------------------------------------------------------- -->
      <div class="table_continer_pagination">
        <el-pagination background :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="totalPage" @prev-click="prevPage"
          @current-change="currentChange" @next-click="nextPage" />
      </div>
    </div>
  </div>
</template>

<script>
import { listDetail } from '@/api/deviceConsumable/stock'
export default {
  name: 'detailed',
  props: {
    parentid: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      productList: [],
      form: {},//基本信息
      totalPage: 1, // 统共页数，默认为1
      currentPage: 1, //当前页数 ，默认为1
      pageSize: 10, // 每页显示数量
      currentPageData: [], //当前页显示内容
    }
  },
  created () {
    this.getlist()
  },
  methods: {
    async getlist () {
      const { data: res1 } = await listDetail(this.parentid);
      this.form = res1
      this.form.warehousingConsumableVos = res1.warehousingConsumableVos;
      this.productList = res1.warehousingConsumableVos;
      this.totalPage = res1.warehousingConsumableVos.length;
      this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
      this.setCurrentPageData();
    },
    totalPrice (price, num) {
      if (price || num) {
        return (price * num).toFixed(2)
      } else {
        return '-'
      }
    },
    // 设置当前页面数据，对数组操作的截取规则为[0~10],[10~20]...,
    setCurrentPageData () {
      let begin = (this.currentPage - 1) * this.pageSize;
      let end = this.currentPage * this.pageSize;
      this.currentPageData = this.productList.slice(
        begin,
        end
      );
    },
    //上一页
    prevPage () {
      if (this.currentPage == 1) return;
      this.currentPage--;
      this.setCurrentPageData();
    },
    // 下一页
    nextPage () {
      if (this.currentPage == this.totalPage) return;
      this.currentPage++;
      this.setCurrentPageData();
    },
    // 点击分页的数字事件
    currentChange (i) {
      this.currentPage = i;
      this.setCurrentPageData();
    }
  }
}
</script>

<style lang="scss" scoped>
.center_dialog {
  width: 90%;
  margin: 0px auto;
}

.dialog_left {
  width: 100%;

  &_image {
    width: 85px;
  }
}

.dialog_table {
  margin-top: 20px;
}

// .dialog_left>div:nth-child(1){
//   flex:1
// }
.dialog_left>div:nth-child(2) {
  flex: 10;
  margin-left: 10px
}

/* el-descriptions-item 文字居中 */
::v-deep .el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
  text-align: center;
}
</style>